<template>
    <div ref="chart" style="width: 1200px; height: 500px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  
  export default {
    data() {
      return {
        chartData: [],
      };
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      async fetchData() {
        try {
          const response = await axios.get('http://localhost:8081/house/district');
          const data = response.data;
          this.chartData = data;
          this.renderChart();
        } catch (error) {
          console.error('Error fetching data:', error);
        }
      },
      renderChart() {
        const chart = echarts.init(this.$refs.chart);
  
        // 转换数据格式为南丁格尔玫瑰图所需格式
        const seriesData = this.chartData.map(item => ({
          name: item.district,
          value: item.count,
        }));
  
        const option = {
          title: {
            text: '各区房屋数量占比',
            left: 'center',
            textStyle: {  
                fontSize: 22, // 设置标题文字大小  
            },
          },
          tooltip: {
            textStyle: {  
                fontSize: 14, // 设置 tooltip 文字大小  
            }},
          series: [{
            name: '数量',
            type: 'pie',
            radius: '75%',
            center: ['50%', '60%'],
            data: seriesData,
            roseType: 'radius',
            label: {
              formatter: '{b}: {c} ({d}%)',
              fontSize: 20  // 设置扇区标签的字体大小为20px
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 30,
                shadowOffsetX: 0,
                shadowColor: 'rgba(2, 2, 2, 0.5)',
              },
            },
          }],
        };
  
        chart.setOption(option);
      },
    },
  };
  </script>
  